<html>
  <head>
    <style>
      body *{
        padding:0;
        margin:0;
      }
      .box {
        width:70px;
        height:100px;
        line-height:0;
        font-size:0;
        display:inline-block;
        background-color:red;
      }
      .box-item{
        font-size:0;
        width:50%;
        height:50%;
        float:left;
        box-sizing: border-box;
      }
      .border-bottom{
        border-bottom:2px solid #233142;
      }
      .border-right{
        border-right:2px solid #233142;
      }
      .border-top{
        border-top:2px solid #233142;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="box box-cross">
        <div class="box-item border-right"></div>
        <div class="box-item border-bottom"></div>
        <div class="box-item border-right" ></div>
        <div class="box-item"></div>
      </div><div class="box box-line">
        <div class="box-item border-right"></div>
        <div class="box-item"></div>
        <div class="box-item border-right" ></div>
        <div class="box-item"></div>
      </div><div class="box box-extend">
        <div class="box-item border-right"></div>
        <div class="box-item border-bottom"></div>
        <div class="box-item" ></div>
        <div class="box-item"></div>
      </div>
    </div>
    <div>
      <div class="box box-cross">
        <div class="box-item border-right"></div>
        <div class="box-item border-bottom"></div>
        <div class="box-item border-right" ></div>
        <div class="box-item"></div>
      </div>
      <div class="box box-line">
        <div class="box-item border-right"></div>
        <div class="box-item"></div>
        <div class="box-item border-right" ></div>
        <div class="box-item"></div>
      </div>
      <div class="box box-extend">
        <div class="box-item border-right"></div>
        <div class="box-item border-bottom"></div>
        <div class="box-item" ></div>
        <div class="box-item"></div>
      </div>
    </div>
  </body>
</html>
